import React, { useState } from 'react';
import ReactDom from 'react-dom';
import { useEffect } from 'react/cjs/react.development';
/*
  学习目标：useEffect可以处理卸载时的钩子函数
  需求1： 在挂载时，监听window的窗口改变事件
  需求2： 在卸载时，取消监听的window窗口改变事件
*/
const App = () => {
  // 准备组件的显示与隐藏
  const [isShow, setIsShow] = useState(true);
  return (
    <div>
      {isShow && <Child></Child>}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  );
};

function Child() {
  // 在子组件中挂载时监听窗口改变事件
  // 2. 封装监听代码
  const resizeFn = () => {
    console.log('123  ----->  ', 123);
  };
  // 1. 挂载后，开启监听
  useEffect(() => {
    window.addEventListener('resize', resizeFn);
  }, []);

  // 3. 卸载时清除监听事件
  useEffect(() => {
    // 🔔useEffect接收的回调函数中，返回一个函数，代表卸载是执行改函数
    return () => {
      console.log('我被卸载了，我被触发了  ----->  ');
      window.removeEventListener('resize', resizeFn);
    };
  }, []);
  return <div>我是子组件</div>;
}
ReactDom.render(<App />, document.getElementById('root'));
